<template>
  <view class="balance">
    <!-- 背景盒子 -->
    <view class="bg_box">
      <view class="transparent_box">
        <image class="bg_img_left" src="../../static/images/personCenter/Vectorleft.png" mode=""></image>
        <image class="bg_img_right" src="../../static/images/personCenter/vector.png" mode=""></image>
        <image class="circle" src="../../static/images/personCenter/Circle.png" mode=""></image>

      </view>
      <view class="text_box flex-column " style="justify-content: space-between;">
        <view class="font-wight-600 " style="font-size: 48rpx;">$3002.00</view>
        <view class="">昨日收益</view>
        <view class="">截止统计日期 {{dayText}}</view>

      </view>
    </view>
    <!-- 变动明细 -->
    <view class="biandong" style="border-radius: 10rpx;">
      <view class="b_title fs-32 font-wight-600">
        变动明细
      </view>
      <!-- 列表 -->
      <view class="bd_list" v-for="(item,index) in bdList" :key="item.id">
        <view class="bet_flex fs-28 top">
          <view class="">{{item.title}}</view>
          <view class=""> <text>{{item.pm==1?'+':'-'}}</text> {{item.num}}</view>
        </view>
        <view class="bet_flex fs-24" style="color: #a6a6a6;">
          <view class="">{{times(item.created_at)}}</view>
          <view class="">余额{{item.new_balance}}</view>
        </view>
      </view>
      <!-- 暂无更多记录 -->
      <view class="nolist_box fs-32" v-if="!bdList.length>0">
        暂无更多记录 ~
      </view>
    </view>
  </view>

</template>

<script>
  import moment from 'moment'
  export default {
    data() {
      return {
        start_time: '',
        end_time: '',
        bdList: []
      };
    },
    computed: {
      dayText() {
        return moment().subtract(1, 'd').format('MM/DD')
      }
    },
    onLoad() {
      this.start_time = moment().subtract(1, 'd').startOf('day').unix()
      this.end_time = moment().subtract(1, 'd').endOf('day').unix()
      this.spread()
    },
    methods: {
      times(str) {
        let date = new Date(Number(str + '000'))
        const formatNumber = n => {
          n = n.toString()
          return n[1] ? n : '0' + n
        }
        const formatTime = (date, word = false, datestring = '/', timestring = ":") => {

          const year = date.getFullYear()
          const month = date.getMonth() + 1
          const day = date.getDate()
          const hour = date.getHours()
          const minute = date.getMinutes()
          const second = date.getSeconds()
          return [year].map(formatNumber) + '年' + [month].map(formatNumber) + '月' + [day].map(formatNumber) + '日' +
            ' ' + [
              hour
            ].map(formatNumber) + ':' + [minute].map(formatNumber) + ':' + [second].map(formatNumber)
        }
        return formatTime(date)
      },
      async spread() {
        let res = await this.$http.get('user/get_bills', {
          start_time: this.start_time,
          end_time: this.end_time,
		  pm:1
        })
        this.bdList = res.data
      }
    }
  }
</script>

<style lang="less">
  page {
    background-color: #1E2240;
  }

  .balance {
    padding: 30rpx;

    .biandong {
      padding: 30rpx;
      border: 2rpx solid #707070;
      margin-top: 40rpx;
      background: #272C52;
      border-image: linear-gradient(to left, rgba(0, 20, 255, 1) 0%, rgba(128, 31, 240, 1) 50%, rgba(255, 44, 223, 1) 100%) 10;
      border-radius: 8rpx;
      border-image-slice: 8rpx;
      color: #fff;

      .nolist_box {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #A6A1A1;
        margin-top: 200rpx;

      }

      .bd_list {
        margin-top: 30rpx;

        .top {
          margin-bottom: 20rpx;
        }

        .bet_flex {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }

      .b_title {
        padding-bottom: 30rpx;
        border-bottom: 2rpx solid rgba(247, 247, 247, 1);
      }
    }




    .bg_box {
      border-radius: 10rpx;
      height: 270rpx;
      box-shadow: 0rpx 20rpx 50rpx rgba(191, 21, 108, 0.05);
      background: linear-gradient(266.84deg, rgba(0, 20, 255, 1) 0%, rgba(128, 31, 240, 1) 50%, rgba(255, 44, 223, 1) 100%);

      .text_box {
        padding: 40rpx;
        color: #fff;
        // display: flex;
        // flex-direction: column;
        // justify-content: space-between;
        height: 100%;
      }

      .transparent_box {
        position: relative;

        .circle {
          position: absolute;
          height: 320rpx;
          width: 420rpx;
          right: -56rpx;
          top: -10rpx;
        }

        .bg_img_left {
          width: 360rpx;
          height: 370rpx;
          position: absolute;
          top: -60rpx;
          left: 0;
        }

        .bg_img_right {
          width: 370rpx;
          height: 280rpx;
          position: absolute;
          top: -60rpx;
          right: -40rpx;
        }
      }

    }
  }


  // .border-radius-#{$i}
</style>